<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loading-字体图标动画</title>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style type="text/css">
		html,body{
			height: 100vh;
			margin: 0;
			padding: 0;
			background: linear-gradient(270deg,rgba(255,149,41,1) 0%,rgba(255,102,34,1) 100%);
		}
		.loading-wrapper{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 120px;
			width: 180px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.battery:after{
			content: '\f244';
			font-family: 'FontAwesome';
			animation: battery 3s infinite;
			color: #fff;
			font-size: 40px;
		}
		@keyframes battery{
		    0%{
		        content: '\f244'
		    }
		    20%{
		        content: '\f243'
		    }
		    40%{
		        content: '\f242'
		    }
		    60%{
		        content: '\f241'
		    }
		    80%{
		        content: '\f240'
		    }
		}
		.hourglass:after{
			content: '\f251';
			font-family: 'FontAwesome';
			animation: hourglass 3s infinite;
			color: #fff;
			font-size: 40px;
			display: block;
			width: 33px;
			transform-origin: center;
		}
		@keyframes hourglass{
		    0%{
		    	transform: rotate(0deg);
		        content: '\f251';		        
		    }
		    50%{
		    	transform: rotate(0deg);
		        content: '\f252';
		    }
		    60%{
		    	transform: rotate(0deg);
		        content: '\f253';
		    }
		    100%{
		    	transform: rotate(180deg);
		        content: '\f253';
		    }
		}
	</style>
</head>
<body>
	<div class="loading-wrapper">
		<div class="battery"></div>
		<div class="hourglass"></div>
	</div>
</body>
</html>